<%--
  Created by IntelliJ IDEA.
  User: Alan4
  Date: 2023/1/31
  Time: 11:35
  To change this template use File | Settings | File Templates.
--%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false"%>
		<%@include file="/public/head.jsp"%>
		<!-- Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog  modal-dialog-centered">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h1 class="modal-title fs-5" id="exampleModalLabel">部门信息录入</h1>
		        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      </div>
		      <div class="modal-body">
				<input id="department-add-name"  onclick="clickSelectInputTextAll(this)" class="department-add-input w-100" type="text" placeholder="请输入部门名字"/><br />
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
		        <button id="department-add-submit-btn" type="button" class="btn btn-primary">提交</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div class="row department-head">
			<div class="col-md-5 text-center offset-md-1 col-12">
				<input type="text"  onclick="clickSelectInputTextAll(this)" id="department-search" value="${paging.fuzzyQuery}" placeholder="部门名" />
				<input type="image" id="department-search-icon" src="${pageContext.request.contextPath}/public/search.png"/>
			</div>
			<div class="col-md-5 text-center col-12">
				<button type="button" id="department-btn-add" data-bs-toggle="modal" data-bs-target="#exampleModal">添加数据</button>
				<button id="department-btn-batch-deletion">批量删除</button>
			</div>
		</div>
		
		<div class="row department-list">
			<div class="col-md-10 offset-md-1 col-12 ">
				<table class="w-100 department-list-table">
					<thead>
						<tr>
							<td class="w-auto"></td>
							<td class="w-auto">部门名称</td>
							<td class="w-auto">人员统计</td>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${paging.data}" var="item">
							<tr>
								<td><input type="checkbox" class="departmentId" name="departmentId" value="${item.id}"></td>
								<td>${item.name}</td>
								<td><span style="color: #2F88FF;cursor: pointer;">${item.userCount}</span></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row department-paging">
			<div class="col-md-9 offset-md-1">
			<span style="color: #2F88FF;cursor: pointer;<c:if test="${paging.pageNow == 1}">pointer-events:none;color: gray;</c:if>" id="department-pre-page">上一页</span>
			( <span id="department-page-now">${paging.pageNow}</span> )
			<span style="color: #2F88FF;cursor: pointer;<c:if test="${paging.pageNow == paging.pageCount}">pointer-events:none;color: gray;</c:if>" id="department-next-page">下一页</span>
			&nbsp;&nbsp;共${paging.pageCount}页${paging.rowCount}条数据
			</div>
			<div class="col-md-1 text-center">
				<select id="department-set-page-size">
					<option <c:if test="${paging.pageSize == 5}">selected</c:if> value="5">5条/页</option>
					<option <c:if test="${paging.pageSize == 10}">selected</c:if> value="10">10条/页</option>
					<option <c:if test="${paging.pageSize == 20}">selected</c:if> value="20">20条/页</option>
					<option <c:if test="${paging.pageSize == 50}">selected</c:if> value="50">50条/页</option>
					<option <c:if test="${paging.pageSize == 100}">selected</c:if> value="100">100条/页</option>
					<option <c:if test="${paging.pageSize == 200}">selected</c:if> value="200">200条/页</option>
				</select>
			</div>
		</div>
		<%@include file="/public/foot.jsp"%>